<template>

  <div class="cjy-select_con "
       style="display: block;position:static"
       @click.stop="hidePopUp">
    <ul class="cjy-classify-list">
      <li class="cjy-col-xs-3 "
          v-if=""
          v-for="(item , index) in titleInfor"
          :key="index"
          @click="changeIndex(index)">
        <span
          style="width: 100%;margin:0"
          :style="{color: activeIndex == index ?colorStyle:'',
          borderColor: activeIndex == index ?borderColor:'',
          background:activeIndex == index ?backGroundColor:''}">
          {{item.goodsClassName}}
        </span>
      </li>
      <li class="cjy-col-xs-3 "
          @click="closeList"
          style="position:relative">
      <span :style="{color: colorStyle}" style="width: 100%;margin:0">收起<i class="cjy-up-icon"></i>
        </span>
      </li>
    </ul>
  </div>

</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {
        activeIndex: 0,
      }
    },
    components: {},

    props: {
      page: {
        type: String,
        default: ''
      },
      activeClass: {
        type: String,
        default: ''
      },
      pullDownTitle: {
        type: String,
        default: '分类'
      },
      //下拉菜单
      titleInfor: {
        type: Array,
        //传入的数据如下 分类名称必传
        default: [{
          goodsClassCode: "",
          goodsClassName: "分类"
        }]
      },
      colorStyle: {
        type: String,
        default: '#299a28'
      },
      backGroundColor: {
        type: String,
        default: 'rgba(41, 154, 40, 0.1)'
      },
      borderColor: {
        type: String,
        default: 'rgba(41, 154, 40, 0.3)'
      },
      width: {
        type: String,
        default: ''
      }
    },
    methods: {
      changeIndex (index) {
        if (this.page == 'firstClass') {
          var titleInfor = this.titleInfor
          var goodsClassCode = titleInfor[index].goodsClassCode
          this.$router.replace({path: '', query: {code: goodsClassCode}})
          this.hidePopUp()
        } else {
          this.$store.dispatch('cjy/changeClassifyIndex', index)
        }

      },
      hidePopUp () {
        this.$emit('hidePopUp')
      },
      closeList () {
        this.$emit('closeList')
      },
      changeIndexForCode () {
        var titleInfor = this.titleInfor
        var goodsClassCode = this.activeClass
        var activeIndex = titleInfor.findIndex((item) => {
          return goodsClassCode == item.goodsClassCode
        })
        if (activeIndex != -1) {
          this.activeIndex = activeIndex
        }
      }

    },
    computed: {
      activeList (){
        return this.$store.state.cjy.classifyIndex
      },
//      titleInfors (){
//        var titleInfors = []
//        for (var i = 0; i < 5; i++) {
//          titleInfors = titleInfors.concat(this.titleInfor)
//        }
//        return titleInfors
//      }
    },
    watch: {
      activeList (data) {
        if (!this.page) {
          this.activeIndex = data
        }
      },
      activeClass (data) {
        this.changeIndexForCode()
      }
    },
    mounted () {
      if (!this.page) {
        this.activeIndex = this.activeList
      } else if (this.page == 'firstClass') {
        this.changeIndexForCode()
      }
    }
  }
</script>

<style scoped>
  .cjy-select_con {
    width: 100%;
    background: white;
  }

  .cjy-col-xs-3 {
    width: 25%;
    position: relative;
    padding: 0.2rem;
    float: left;
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .cjy-classify-list {
    padding: 0.3rem;
    text-align: center;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid rgb(234, 234, 234);
  }

  .cjy-classify-list span {
    display: inline-block;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    padding: 3px 0;
    margin: 0.2rem;
    width: 22vw;
    white-space: nowrap;
    font-size: 14px;
    overflow: hidden;
    vertical-align: top;
    text-overflow: ellipsis;
  }

  .cjy-up-icon {
    border-left: 2px solid #299a28;
    border-top: 2px solid #299a28;
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    transform: rotate(45deg);
    margin-left: 0.2rem;
  }

</style>
